<template>
	<u-popup :show="isShow" @close="onClear" mode="center" bgColor="transparent">
		<view class="bg">
			<view class="title">
				核销码
			</view>
			<view class="hint">
				请核销人员扫码
			</view>

			<view class="image-code">
				<slot name="image"></slot>
			</view>
		</view>
		<view class="clear" @click="onClear">
			<image src="__ROOT__/common/images/clean-icon.png" mode=""></image>
		</view>
	</u-popup>
</template>
<script setup>
	import {
		ref,
		watch
	} from 'vue'
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	})
	const emits = defineEmits(['clear'])
	const isShow = ref(false)
	watch(() => props.show, (v) => {
		isShow.value = v
	})
	const onClear = () => {
		emits('clear', false)
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 648rpx;
		height: 632rpx;
		background: #FFFFFF;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		padding-top: 34rpx;

		.title {
			font-family: OPPOSans, OPPOSans;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
			text-align: center;
			line-height: 48rpx;
		}

		.hint {
			font-family: OPPOSans, OPPOSans;
			font-weight: 500;
			font-size: 24rpx;
			color: #909397;
			text-align: center;
			line-height: 32rpx;
			margin-top: 4rpx;
		}

		.image-code {
			width: 414rpx;
			height: 414rpx;
			margin: 34rpx auto 0;
		}
	}



	.clear {
		width: 100rpx;
		height: 100rpx;
		margin: 58rpx auto 0;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>